<template>
	<view class="content column">
		<view class="justify-between pt20 header">
			<view class="btncj btn1" @tap="open()">
				配置数量
			</view>
			<view class="btncj btn2" @click="start()">
				开始抽奖
			</view>
			
		</view>
		<view class="show">{{str}}</view>
		<view class="lists flex row">
			<view v-for="(item, index) in itemList" :key="index"
				:class="current==index?'lists-item chose':'lists-item'">
				<view>{{item.name}}</view>
			</view>
		</view>
		
	</view>

	<uv-popup ref="popup" round="10">
		<view class="setcofig">
			<uv-input placeholder="请输入要创建的数量" prefixIcon="search" v-model="maxNumber"
				prefixIconStyle="font-size: 22px;color: #909399" border="bottom" clearable></uv-input>
		</view>
		<view style="padding: 20px;">
			<button @click="save()">创建</button>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					name: '1'
				}],
				current: -1,
				str: '请生成随机数',
				minNumber: 0,
				maxNumber: 10,
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			//保存数量
			save() {
				this.init();
				this.$refs.popup.close();

			},
			open() {
				this.$refs.popup.open('bottom');
			},

			init() {
				this.itemList = [];
				this.str = '请生成随机数';
				for (let i = 1; i <= this.maxNumber; i++) {
					this.itemList.push({
						name: i.toString()
					});
				};
			},
			start() {
				console.log('start')
				let i = -1;
				let stop = 42;
				let time = 100;
				const max = this.maxNumber - 1;
				const interval = setInterval(() => {
					i++;
					this.current = Math.floor(Math.random() * (max - this.minNumber + 1)) + this
						.minNumber;
					this.str = this.itemList[this.current].name.toString();
					if (i === stop) {
						// console.log(this.current);
						// console.log(this.itemList[this.current]);
						// this.isRunning = false;
						// this.complete(this.items[this.current]);
						clearInterval(interval);
					}
				}, time);
			}
		}
	}
</script>

<style lang="scss">
	.setcofig {
		height: 200px;
		padding: 20px;
	}

	.header {
		width: 100%;
		height: 80px;
		color: #767676;
		font-size: 14px;
	}

	.show {
		height: 100px;
		width: 100%;
		border-radius: 5px;
		background-color: black;
		color: #ffffff;
		font-size: 30px;
		font-weight: 500;
		line-height: 100px;
		text-align: center;
		margin-top: 20px;
	}

	.btncj {
		height: 50px;
		width: 150px;
		border-radius: 5px;
		color: #ffffff;
		font-size: 24px;
		font-weight: 500;
		line-height: 50px;
		text-align: center;
	}
	.btn2{
		background-color: $uni-color-success;
	}
	.btn1{
		background-color: $uni-color-primary;
	}
	
	

	.chose {
		// border: 1px solid orangered !important;
		font-size: 24px;
		color: #ffffff !important;
		background-color: #000000 !important;
	}

	.lists {
		width: 100%;
		flex-wrap: wrap;
		margin-top: 20px;

		&-item {
			width: 50px;
			height: 50px;
			background-color: $uni-bg-color-grey;
			margin: 1px;
			text-align: center;
			line-height: 50px;
			border: 1px solid $uni-bg-color-grey;
			border-radius: 5px;
		}
	}
</style>